<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>
    <script type="text/babel">
        /*
            项目中常用钩子函数：
                componentWillMount -- 组件挂载前
                render -- 组件渲染钩子
                componentDidMount -- 组件挂载后

        */

        // class MyComponent extends React.Component {
        //     constructor(props) {
        //         super(props)
        //         console.log('MyComponent --- constructor')
        //         // 初始化测试数据
        //         this.state = {
        //             status: true
        //         }
        //     }
        //     uninstallFn = () => {
        //         ReactDOM.unmountComponentAtNode(document.getElementById('app'))
        //     }
        //     changeStatusFn = () => {
        //         let { status } = this.state
        //         this.setState({
        //             status: !status
        //         })
        //     }
        //     // 组件挂载前
        //     componentWillMount () {
        //         console.log('MyComponent --- componentWillMount --- 组件挂载前')
        //     }
        //     // 组件渲染钩子render
        //     render () {
        //         console.log('MyComponent --- render --- 组件渲染')
        //         let { status } = this.state
        //         return (
        //             <div>
        //                 <button onClick={this.uninstallFn}>卸载组件</button>
        //                 <div>{status ? 'true' : 'false'}</div>
        //                 <button onClick={this.changeStatusFn}>修改status</button>
        //                 <button onClick={this.forceFn}>强制修改状态</button>
        //             </div>
        //         )
        //     }
        //     // 组件挂载后
        //     componentDidMount () {
        //         console.log('MyComponent --- componentDidMount --- 组件挂载后')
        //     }

        //     // 组件将要被卸载
        //     componentWillUnmount () {
        //         console.log('MyComponent --- componentWillUnmount --- 组件将要被卸载')
        //     }
        //     /*
        //         控制组件更新的阀门
        //         每次使用setState更新状态都会去询问这个阀门
        //         为true则允许更新（更新后触发render函数），false为不允许更新（不触发render函数）
        //         如果没写这个钩子，react底层会默认加上这个钩子函数且默认return true
        //     */
        //     shouldComponentUpdate () {
        //         console.log('MyComponent --- shouldComponentUpdate --- 控制组件更新的阀门')
        //         return true
        //     }
        //     // 组件将要更新
        //     componentWillUpdate () {
        //         console.log('MyComponent --- componentWillUpdate --- 组件将要更新')
        //     }
        //     // 组件更新完毕
        //     componentDidUpdate () {
        //         console.log('MyComponent --- componentDiaUpdate --- 组件更新完毕')
        //     }
        //     /*
        //         强制更新（不收阀门控制）
        //     */
        //     forceFn = () => {
        //         this.forceUpdate()
        //     }
        // }

        class A extends React.Component {
            state = {
                carName: '奥迪'
            }
            changeCarName = () => {
                this.setState({
                    carName: '玛莎拉蒂'
                })
            }
            render () {
                return (
                    <div>
                        <div>A组件</div>
                        <button onClick={this.changeCarName}>修改车</button>
                        <B carName={this.state.carName} />
                    </div>
                )
            }
        }

        class B extends React.Component {
            // 将接收新的属性(首次接收属性不触发)
            componentWillReceiveProps (props) {
                console.log('B -- componentWillReceiveProps', props)
            }
            componentWillUpdate () {
                console.log('B -- componentWillUpdate')
            }
            componentDidUpdate () {
                console.log('B -- componentDidUpdate')
            }
            render () {
                return (
                    <div>
                        <div>B组件</div>
                        <div>接收到的车名:{this.props.carName}</div>
                    </div>
                )
            }
        }

        ReactDOM.render(<A />, document.getElementById('app'))
    </script>
</body>

</html>